<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    {{ URL::asset('/Style/home/css/base.css') }}
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('/Style/home/chart/css/themes.css?v=2017129') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('/Style/home/chart/css/h5app.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('/Style/home/chart/fonts/iconfont.css?v=2016070717') }}">
    <script src="{{ URL::asset('/Style/home/chart/js/jquery.min2.js') }}"></script>
    <script src="{{ URL::asset('/Style/home/chart/js/dist/flexible/flexible_css.debug.js') }}"></script>
    <script src="{{ URL::asset('/Style/home/chart/js/dist/flexible/flexible.debug.js') }}"></script>
    <script src="{{ URL::asset('/Style/home/chart/qqFace/js/jquery.qqFace.js') }}"></script>
    <style>
        .qqFace { margin-top: -180px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
        .qqFace table td { padding: 0px; }
        .qqFace table td img { cursor: pointer; border: 1px #fff solid; }
        .qqFace table td img:hover { border: 1px #0066cc solid; }
    </style>

</head>
<body ontouchstart>
<div class='fui-page-group'>
    <div class='fui-page chatDetail-page'>
        <div class="chat-header flex">
            <i class="icon icon-toleft t-48"></i>
            <span class="shop-titlte t-30">商店</span>
            <span class="shop-online t-26"></span>
            <span class="into-shop">进店</span>
        </div>
        <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
            <div class="chat-content">
                <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
                <p class="chat-time"><span class="time">2017-11-12</span></p>



            </div>
        </div>
        <div class="fix-send flex footer-bar">
            <i class="icon icon-emoji1 t-50"></i>
            <input class="send-input t-28" maxlength="200" id="saytext">
            <input type="file" id="file" name="pid" style="display: none">
            <i class="icon icon-add t-50 img_up" style="color: #888;"></i>
            <span class="send-btn">发送</span>
        </div>
    </div>
</div>
<script>

    var  fromid = {{$fromid}};
    var toid = {{$toid}};
    var from_head = '';
    var to_head = '';
    var to_name='';
    var online = 0;
    var wx = new WebSocket('ws://127.0.0.1:8282');
    wx.onmessage=function(e){
        var message  = eval("("+e.data+")");
        console.log(message)
        switch (message.type){
            case 'init':
                var bild = '{"type":"bind","fromid":"'+fromid+'"}';
                wx.send(bild)
                get_head(fromid,toid)
                get_name(toid);
                message_load();
                var online = '{"type":"online","toid":"'+toid+'","fromid":"'+fromid+'"}';
                wx.send(online);
                return;
            case 'text':
                if(toid==message.fromid){
                    $('.chat-content').append('<div class="chat-text section-left flex"> <span class="char-img" style="background-image: url('+to_head+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+replace_em(message.data)+'</span> </div>');
                    $(".chat-content").scrollTop(3000);
                }
            return;
            case  "say_img":
                $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+to_head+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="'+message.img_name+'"></span> </div>');
                $(".chat-content").scrollTop(3000);
                return;
            case 'save':
                save_message(message);
                if(message.isread==1){
                    online = 1
                    $(".shop-online").text("在线");
                }else{
                    online = 0
                    $(".shop-online").text("不在线");
                }
                return;
            case  "online":
                if(message.status==1){
                    online = 1
                    $(".shop-online").text("在线");
                }else{
                    online = 0
                    $(".shop-online").text("不在线");
                }
        }
    }

    $(".send-btn").click(function (){
        var text = $(".send-input").val();
        if(text==''){
            return;
        }
        var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}'
        $(".chat-content").append('<div class="chat-text section-right flex"> <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+replace_em(text)+'</span> <span class="char-img" style="background-image: url('+from_head+')"></span> </div>')
        $(".chat-content").scrollTop(3000);
        wx.send(message)
        $('.send-input').val("");
        // wx.send("你们好!!")
    })

    function  save_message(message){
        $.ajax({
            type:"POST",// get或者post
            url: "/chat/save",// 请求的url地址
            data:{
                "_token": '{{csrf_token()}}',
                'message' : message,
            },
            success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果

            },
        });
    }

    function  get_head(fromid,toid){
        $.ajax({
            type:"POST",// get或者post
                url: "/chat/getHead",// 请求的url地址
            data:{
                "_token": '{{csrf_token()}}',
                'fromid' : fromid,
                'toid' : toid,
            },
            success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
                from_head = data.from_head;
                to_head = data.to_head;
            },
        });
    }
    function  get_name(toid){
        $.ajax({
            type:"POST",// get或者post
            url: "/chat/getName",// 请求的url地址
            data:{
                "_token": '{{csrf_token()}}',
                'uid' : toid,
            },
            success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
                to_name = data;
                $(".shop-titlte").text("与"+to_name+"聊天中...");
            },
        });
    }
    function message_load(){
        $.ajax({
            type:"POST",// get或者post
            url: "/chat/load",// 请求的url地址
            data:{
                "_token": '{{csrf_token()}}',
                'fromid' : fromid,
                'toid' : toid,
            },
            success:function(data){
                $.each(data,function(index,content){
                    if(fromid==content.fromid){
                        if(content.type==2){
                            $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="'+content.content+'"></span> <span class="char-img" style="background-image: url('+from_head+')"></span> </div>');
                        }
                        else{
                            $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+replace_em(content.content)+'</span> <span class="char-img" style="background-image: url('+from_head+')"></span> </div>');
                        }
                    }else{
                        if(content.type==2){
                            $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+to_head+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="'+content.content+'"></span> </div>');

                        }
                        else{
                            $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+to_head+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+replace_em(content.content)+'</span> </div>');
                        }
                    }
                })
                $(".chat-content").scrollTop(3000);
            },
        });
    }
    $(".img_up").click(function (){
        $('#file').click();
    })


    //查看结果
    function replace_em(str){
        str = str.replace(/\</g,'&lt;');
        str = str.replace(/\>/g,'&gt;');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[em_([0-9]*)\]/g,'<img src="Style/home/chart/qqFace/arclist/$1.gif" border="0" />');
        console.log(str);
        return str;
    }
    $(function(){
        $('.icon-emoji1').qqFace({
            assign:'saytext',
            path:'Style/home/chart/qqFace/arclist/'	//表情存放的路径
        });
        $(".sub_btn").click(function(){
            var str = $("#saytext").val();
            $("#show").html(replace_em(str));
        });
    });

    $("#file").change(function (e){
        var formData = new FormData()  //创建一个forData
        var file = this.files[0];
        formData.append('img',file);
        formData.append('fromid',fromid);
        formData.append('toid',toid);
        formData.append('online',online);
        console.log($("#file")[0].files[0])



        $.ajax({
            headers: { 'X-CSRF-TOKEN' : '{{csrf_token()}}'},
            type:"POST",// get或者post
            url: "/chat/upload",// 请求的url地址
            data:formData,
            contentType: false,
            processData: false,
            success:function(data){
                if(data.status=='ok'){
                    $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="'+data.img_name+'"></span> <span class="char-img" style="background-image: url('+from_head+')"></span> </div>');
                    $(".chat-content").scrollTop(3000);
                    var message = '{"data":"'+data.img_name+'","fromid":"'+fromid+'","toid":"'+toid+'","type":"say_img"}';
                    $("#file").val("");
                    wx.send(message);
                }else{
                    console.log(data.status);
                }
            },
        });
    })


</script>

</body>
</html>
